<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2014/6/9
  Time: 16:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>起步</title>
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="/js/bootbox.min.js"></script>
    <script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
    <style type="text/css">
        #list-group{
            width: 212px;
            height: 42px;
            position: fixed;
        }
        body{
            overflow-x: hidden;
            overflow-y: hidden;
        }
    </style>
</head>
<body>
<!-- Docs master nav -->
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Ro0tSh3ll</a>
        </div>
        <nav class="collapse navbar-collapse" >
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="index.post">起步</a>
                </li>
                <li>
                    <a href="#">CSS</a>
                </li>
                <li >
                    <a href="#">组件</a>
                </li>
                <li>
                    <a href="#">JavaScript插件</a>
                </li>
                <li>
                    <a href="#">定制</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="../about">关于</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<div style="margin-top: 52px"/>
    <div class="col-md-2">
        <div id="list-group"class="list-group">
            <a href="/ideaKey/show.post" class="list-group-item" target="frame_right">
                IDEA 算码
            </a>
            <a href="http://www.ro0tsh3ll.com" class="list-group-item" target="frame_right">
                Ro0tSh3ll`blog
            </a>
            <a href="/jsp/bootbox.jsp" class="list-group-item" target="frame_right">
                bootbox test
            </a>
            <a href="/baiDu/createUrl.post" class="list-group-item" target="frame_right">
                百度短网址
            </a>
            <a href="/google/search.post" class="list-group-item active" target="frame_right">
                google
            </a>
        </div>
    </div>
    <div class="col-md-10">
        <iframe id="frame_right" name="frame_right" frameborder="0" src="/google/search.post"></iframe>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        $("#list-group a").attr("onclick","onActive(this);");
    });
    function resetContent(){
        var iframe_h=document.documentElement.clientHeight;
        var iframe_w=document.documentElement.clientWidth;
        if(iframe_h==0 || iframe_w==0){
            iframe_h=document.body.clientHeight;
            iframe_w=document.body.clientWidth;
        }
        if(iframe_h>0 && iframe_w>0){
            document.getElementById('frame_right').style.height = (iframe_h-55 )+ "px";
            document.getElementById('frame_right').style.width = (iframe_w*0.9-110)+ "px";
        }else{
            window.setInterval("resetContent()", 200);
        }
    }
    window.onload=resetContent;
    window.onresize=resetContent;

    function onActive(obj){
        obj = $(obj);
        $("#list-group a").removeClass("active");
        obj.addClass("active");
    }

</script>